<template>
    <div class="card-box">
        <div class="card-title">
            <span>联系人信息</span>
            <el-col :span="2" v-if="showbutton">
                <el-button type="text" @click="addRow">新增</el-button>
                |<el-button type="text" @click="delRow">删除</el-button>
            </el-col>
        </div>
        <div class="margin-box">
            <el-form :rules="form.rules" :model="form" status-icon ref="form">
                <el-table
                    :data="form.editPersons"
                    ref="addTable"
                    align="center"
                >
                    <el-table-column type="selection" />
                    <el-table-column width="60" label="序号" type="index" />
                    <el-table-column label="姓名">
                        <template slot-scope="scope">
                            <el-form-item
                                :prop="'editPersons.' + scope.$index + '.name'"
                                :rules="form.rules.name"
                            >
                                <el-input
                                    class="ipt"
                                    v-model="scope.row.name"
                                    maxlength="24"
                                    placeholder="请输入姓名，不可为空，最长为24位"
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号">
                        <template slot-scope="scope">
                            <el-form-item
                                :prop="'editPersons.' + scope.$index + '.phone'"
                                :rules="form.rules.phone"
                            >
                                <el-input
                                    class="ipt"
                                    v-model="scope.row.phone"
                                    maxlength="11"
                                    placeholder="请输入11位数字手机号码，不可为空"
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="证件号码">
                        <template slot-scope="scope">
                            <el-form-item
                                :prop="
                                    'editPersons.' + scope.$index + '.cardNm'
                                "
                                :rules="form.rules.cardNm"
                            >
                                <el-input
                                    class="ipt"
                                    v-model="scope.row.cardNm"
                                    maxlength="26"
                                    placeholder="请输入证件号码，不可为空"
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="与承租方的联系">
                        <template slot-scope="scope">
                            <el-form-item
                                :prop="
                                    'editPersons.' +
                                        scope.$index +
                                        '.relationshipLessee'
                                "
                                :rules="form.rules.relationshipLessee"
                            >
                                <el-input
                                    class="ipt"
                                    v-model="scope.row.relationshipLessee"
                                    maxlength="18"
                                    placeholder="请输入与承租方的联系，最长为18位，不可为空"
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注">
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input
                                    class="ipt"
                                    v-model="scope.row.remarks"
                                    maxlength="100"
                                    placeholder="备注可为空"
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </div>
    </div>
</template>

<script>
import {
    fetchList,
    getByClientLesseeId
} from "@/views/client-manage/api/clientlesseelinkinfo";
import { validatePhone, validateEmail, validateIdNo } from "~/utils/validate";
export default {
    name: "person-info",
    props: {
        pid: {
            type: String
        },
        showbutton: {
            type: Boolean,
            default: true
        },
        // 是否新增
        isAdd: {
            type: Boolean,
            default: true
        }
    },
    data() {
        const checkPhone = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请输入手机号码"));
            } else {
                const reg = /^(1[123456789]\d{9})$/;
                if (reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error("请输入正确手机号码"));
                }
            }
        };
        return {
            formVerify: true,
            clientLesseeId: "",
            //校验+:
            form: {
                editPersons: [],
                rules: {
                    name: [
                        {
                            required: true,
                            message: "名字不能为空",
                            trigger: ["blur", "change"]
                        }
                    ],

                    phone: [
                        {
                            required: true,
                            message: '手机号码不能为空"',
                            trigger: "blur"
                        },
                        { validator: checkPhone, trigger: "blur" }
                    ],
                    cardNm: [
                        {
                            required: true,
                            message: "证件号码不能为空",
                            trigger: ["blur", "change"]
                        },
                    ],
                    relationshipLessee: [
                        {
                            required: true,
                            message: "与承租方的联系",
                            trigger: ["blur", "change"]
                        }
                    ]
                }
            }
        };
    },
    /*    watch: {
            form: {
                handler: function (val, oldVal) {
                    this.$nextTick(()=>{
                        this.$refs.form.validate(valid => {
                            this.formVerify = (val.editPersons.length == 0 ? true : valid)

                        })
                    })
                },
                deep: true,
            },
        },*/
    /*    computed:{
            formVerify(){
                
                this.$refs.form.validate(valid => {
                    alert(JSON.stringify(this.form.editPersons))
                    return this.form.editPersons==false? true: valid
                })
            }
        },*/
    mounted() {
        this.clientLesseeId = this.pid;
        // 只有存在pid且是编辑场景才请求联系人信息数据
        this.pid && !this.isAdd && this.queryList();
    },
    methods: {
        // 添加行
        addRow() {
            this.$set(this.form.editPersons, this.form.editPersons.length, {
                index: this.form.editPersons.length,
                name: "",
                phone: "",
                cardNm: "",
                relationshipLessee: "",
                remarks: ""
            });
            // this.form.editPersons.push({
            //     index: this.form.editPersons.length,
            //     name: '',
            //     email:'',
            //     phone: '',
            //     remarks: '',
            // })
        },
        // 删除行
        delRow() {
            if (this.form.editPersons.length > 0) {
                if (
                    this.$refs.addTable != undefined ||
                    this.$refs.addTable != null
                ) {
                    let addTables = this.$refs.addTable.selection.map(
                        item => item.index
                    );
                    let editPersons = this.form.editPersons.filter(
                        item => !addTables.includes(item.index)
                    );
                    this.form.editPersons = editPersons.map((item, index) => {
                        item.index = index;
                        return item;
                    });
                }
            }
        },
        // 获取数据
        queryList(clientLesseeId = this.pid) {
            getByClientLesseeId({ clientLesseeId }).then(respdata => {
                let data = respdata.data.data.map((item, index) => ({
                    ...item,
                    index
                }));
                if (data && data.length) {
                    this.form.editPersons = [...data];
                }
            });
        }
    }
};
</script>
<style scoped lang="scss">
.ipt {
    margin-top: 18px;
}
</style>
